<!--
 * @Descripttion:
 * @version:
 * @Author: jiating
 * @Date: 2021-04-14 14:10:13
 * @LastEditors: jiating
 * @LastEditTime: 2021-04-19 09:42:34
-->
<template>
  <el-drawer
    :title="'Bill details'"
    :visible.sync="dialogVisible"
    append-to-body
    :before-close="closeDrawer"
    size="90%">
    <el-form ref="form" :model="fileData" class="form-box">
        <div class="bill-box">
            <div class="bill-left">
                <h4 class="bill-title">SERVICE ACCEPTANCE STATEMENT</h4>
                <h4 class="bill-title">No.{{fileData.number || 'None'}}</h4>
            </div>
            <div class="bill-right">
                <h4 class="bill-title">АКТ ПРИЙМАННЯ-ПЕРЕДАЧІ ПОСЛУГ  </h4>
                <h4 class="bill-title">№.{{fileData.number || '[Нічого]'}}</h4>
            </div>
        </div>
        <br>
        <div class="bill-box">
            <div class="bill-left">
                <div style="width:50%;display: inline-block;">Kyiv</div>
                <div style="width:50%;display: inline-block;text-align:right">{{fileData.date || 'None'}}</div>
            </div>
            <div class="bill-right">
                <div style="width:50%;display: inline-block;">м. Київ  </div>
                <div style="width:50%;display: inline-block;text-align:right">{{fileData.date || '[Нічого]'}}</div>
            </div>
        </div>
        <br>
        <div class="bill-box">
            <div class="bill-left">
                <strong>Limited Liability Company “THUNDERSOFT UKRAINE”,</strong>a company validly organised and existing  under the laws of Ukraine, having its statutory seat at 23-A Yaroslaviv Val Street, 2nd floor, Kyiv, 01054, identification code 43603613, represented by Director Mr He Liming, acting on the basis of the Charter, hereinafter referred to as "Customer", on the one hand, and
            </div>
            <div class="bill-right">
                <strong>Товариством з обмеженою відповідальністю «САНДЕРСОФТ ЮКРЕЙН»,</strong>компанія, що створена та здійснює діяльність за законодавством України, юридична адреса якої вул. Ярославів Вал, буд. 23-А (2-ий поверх), м. Київ, 01054, ідентифікаційний код 43603613, в особі Директора Хе Лімінга, який діє на підставі Статуту, надалі іменується «Замовник», з однієї сторони, та
            </div>
        </div>
        <br>
        <!-- <div class="bill-box">
            <div class="bill-left">
                <template v-if="oldData.editLine1">
                    <el-input
                    type="textarea"
                    :rows="2"
                    placeholder="请输入内容"
                    v-model="fileData.en_line1">
                    </el-input>
                    <i class="el-icon-check" @click="handleOk(1)"></i>
                    <i class="el-icon-close" @click="handleClose(1,'en')"></i>
                </template>
                <template v-else>
                    <div>{{fileData.en_line1}}</div>
                    <i class="el-icon-edit" @click="handleEdit(1,'en')"></i>
                </template>
            </div>
            <div class="bill-right">
               <template v-if="oldData.editLine1">
                    <el-input
                    type="textarea"
                    :rows="2"
                    placeholder="请输入内容"
                    v-model="fileData.uk_line1">
                    </el-input>
                    <i class="el-icon-check" @click="handleOk(1)"></i>
                    <i class="el-icon-close" @click="handleClose(1,'uk')"></i>
                </template>
                <template v-else>
                    <div>{{fileData.uk_line1}}</div>
                    <i class="el-icon-edit" @click="handleEdit(1,'uk')"></i>
                </template>
            </div>
        </div>
        <br> -->
        <div class="bill-box">
            <div class="bill-left">
                <strong>Private entrepreneur {{fileData.pe_name || 'None'}},</strong>tax payer`s identification number {{fileData.tax_number || 'None'}}, acting on the basis of the Excerpt from the Unified state register of legal entities, individual entrepreneurs and social formations (record no. {{fileData.pe_number || 'None'}} as of {{fileData.registered_deadline_date || 'None'}}), registered as a single-tax payer, hereinafter referred to as <strong>“Contractor”</strong>, on the other hand,
            </div>
            <div class="bill-right">
                <strong>Фізичною особою-підприємцем {{fileData.pe_name || '[Нічого]'}},</strong>РНОКПП {{fileData.tax_number || '[Нічого]'}}, яка діє на підставі Витягу з Єдиного державного реєстру юридичних осіб, фізичних осіб-підприємців та громадських формувань (номер запису: {{fileData.pe_number || '[Нічого]'}} від {{fileData.registered_deadline_date || '[Нічого]'}} р.), та є платником єдиного податку, надалі іменується<strong>«Виконавець»,</strong> з іншої сторони,
            </div>
        </div>
        <br>
        <div class="bill-box">
            <div class="bill-left">
                collectively referred to as the <strong>“Parties”</strong>, by this Service acceptance statement confirm the following:
            </div>
            <div class="bill-right">
                надалі разом іменуються як<strong>«Сторони»,</strong>цим Актом приймання-передачі послуг підтверджують наступне:
            </div>
        </div>
        <br>
        <div class="bill-box">
            <div class="bill-left">
                Within the period from {{fileData.first_day || '[None]'}} until {{fileData.last_day || '[None]'}}
            </div>
            <div class="bill-right">
                Протягом періоду з {{fileData.first_day || '[Нічого]'}} року по {{fileData.last_day || '[Нічого]'}} року
            </div>
        </div>
        <br>
        <div class="bill-box">
            <div class="bill-left">
                <strong> Private entrepreneur {{fileData.pe_name || '[None]'}}</strong> has provided <strong>Limited Liability Company “THUNDERSOFT UKRAINE”</strong>with the services in accordance with the services agreement dated {{fileData.first_day || '[None]'}}, namely:
            </div>
            <div class="bill-right">
                <strong>Фізична особа-підприємець {{fileData.pe_name || '[Нічого]'}} надала Товариству з обмеженою відповідальністю «САНДЕРСОФТ ЮКРЕЙН»</strong>послуги відповідно до договору про надання послуг від {{fileData.first_day || '[Нічого]'}} року, а саме:
            </div>
        </div>
        <br>
        <div class="bill-box">
            <div class="bill-left">
                <div class="bill_left_right">Name of services</div>
                    <div class="bill_left_right">Fees,UAH</div>
            </div>
            <div class="bill-right">
                <div class="bill_left_right">Найменування послуг</div>
                    <div class="bill_left_right">Вартість,грн</div>
            </div>
        </div>
        <br>
        <div class="bill-box">
            <div class="bill-left">
                <div class="bill_left_right">{{fileData.name_of_service || '[None]'}}</div>
                    <div class="bill_left_right">{{fileData.money || '[None]'}}</div>
            </div>
            <div class="bill-right">
                 <div class="bill_left_right">{{fileData.name_of_service || '[Нічого]'}}</div>
                    <div class="bill_left_right">{{fileData.money || '[Нічого]'}}</div>
            </div>
        </div>
        <br>
        <div class="bill-box">
            <div class="bill-left">
                <div class="bill_left_right">Value of services, w/t VAT</div>
                    <div class="bill_left_right">{{fileData.money || '[None]'}}</div>
            </div>
            <div class="bill-right">
                <div class="bill_left_right">Вартість послуг, без ПДВ</div>
                    <div class="bill_left_right">{{fileData.money || '[Нічого]'}}</div>
            </div>
        </div>
        <br>
        <div class="bill-box">
            <div class="bill-left">
                <div class="bill_left_right">Total payable</div>
                    <div class="bill_left_right">{{fileData.money || '[None]'}}</div>
            </div>
            <div class="bill-right">
                <div class="bill_left_right">Всього</div>
                    <div class="bill_left_right">{{fileData.money || '[Нічого]'}}</div>
            </div>
        </div>
        <br>
        <div class="bill-box">
            <div class="bill-left">
                The Parties agree that the services described were rendered in full, at the appropriate quality level, and the Parties have no claims to each other.
            </div>
            <div class="bill-right">
                Сторони погоджуються, що зазначені послуги були надані у повному обсязі належної якості та що Сторони не мають претензій одна до одної.
            </div>
        </div>
        <br>
        <div class="bill-box">
            <div class="bill-left">
                This Service acceptance statement is made in two copies, one for each of the Parties, and is simultaneously prepared in English and Ukrainian. In case of any discrepancies between English and Ukrainian text, English text shall prevail.
            </div>
            <div class="bill-right">
                Цей Акт приймання-передачі укладений у двох примірниках, по одному для кожної з Сторін, та паралельно підготовлений англійською та українською мовами. У випадку розбіжностей між англійським та українським текстом, англійський текст матиме переважну силу.
            </div>
        </div>
        <br>
        <div class="bill-box">
            <div class="bill-left">
                <h4>Customer:</h4>
            </div>
            <div class="bill-right">
                <h4>Замовник:</h4>

            </div>
        </div>
        <div class="bill-box">
            <div class="bill-left">
                <h4>“THUNDERSOFT UKRAINE” LLC</h4>
            </div>
            <div class="bill-right">
                <h4>ТОВ «САНДЕРСОФТ ЮКРЕЙН»</h4>
            </div>
        </div>
        <div class="bill-box">
            <div class="bill-left">
                Address: 01054, Kyiv, 23-A Yaroslaviv Val Street, 2nd floor
            </div>
            <div class="bill-right">
                Адреса: 01054, м. Київ, вул. Ярославів Вал, буд. 23-А, 2-ий поверх
            </div>
        </div>
        <div class="bill-box">
            <div class="bill-left">
                Registration number: 43603613
            </div>
            <div class="bill-right">
                Реєстраційний номер: 43603613
            </div>
        </div>
        <div class="bill-box">
            <div class="bill-left">
               <h4>Banking details</h4>
            </div>
            <div class="bill-right">
                <h4>Банківські реквізити</h4>
            </div>
        </div>
        <div class="bill-box">
            <div class="bill-left">
                Account No.: UA763510050000026001879007726(UAH)
            </div>
            <div class="bill-right">
                № рахунку: UA763510050000026001879007726 (Гривня)
            </div>
        </div>
        <div class="bill-box">
            <div class="bill-left">
                Bank`s name: JSC “UKRSIBBANK”
            </div>
            <div class="bill-right">
                Назва банку: АТ «УКРСИББАНК»
            </div>
        </div>
        <div class="bill-box">
            <div class="bill-left">
                Phone: +38 (044) 428-94-44
            </div>
            <div class="bill-right">
                Тел.: +38 (044) 428-94-44
            </div>
        </div>
        <br>
        <h4 class="bill-title">___________________________</h4>
        <h4 class="bill-title">Director / Директор</h4>
        <h4 class="bill-title">Mr He Liming / Хе Лімінг</h4>
        <br>
        <div class="bill-box">
            <div class="bill-left">
                <h4>Contractor:</h4>
            </div>
            <div class="bill-right">
                <h4>Виконавець:</h4>

            </div>
        </div>
        <div class="bill-box">
            <div class="bill-left">
                <h4>Private entrepreneur {{fileData.pe_name || '[None]'}}</h4>
            </div>
            <div class="bill-right">
                <h4>Фізична особа-підприємець {{fileData.pe_name || '[Нічого]'}}</h4>

            </div>
        </div>
        <div class="bill-box">
            <div class="bill-left">
                <h4>Registered address: {{fileData.registered_address || '[None]'}}</h4>
            </div>
            <div class="bill-right">
                <h4>Місцезнаходження: {{fileData.registered_address || '[Нічого]'}}</h4>

            </div>
        </div>
        <div class="bill-box">
            <div class="bill-left">
                <div>Tax payer`s identification number: {{fileData.tax_number || '[None]'}}</div>
            </div>
            <div class="bill-right">
                <div>РНОКПП: {{fileData.tax_number || '[Нічого]'}}</div>

            </div>
        </div>
        <div class="bill-box">
            <div class="bill-left">
                <h4>Banking details</h4>
            </div>
            <div class="bill-right">
                <h4>Банківські реквізити</h4>

            </div>
        </div>
        <div class="bill-box">
            <div class="bill-left">
                <div>Account No.{{fileData.bank_account_number || '[None]'}}</div>
            </div>
            <div class="bill-right">
                <div>№ рахунку: {{fileData.bank_account_number || '[Нічого]'}}</div>

            </div>
        </div>
        <div class="bill-box">
            <div class="bill-left">
                <div>Bank`s name: {{fileData.bank_name || '[None]'}}</div>
            </div>
            <div class="bill-right">
                <div>Назва банку: {{fileData.bank_name || '[Нічого]'}}</div>

            </div>
        </div>
        <div class="bill-box">
            <div class="bill-left">
                <div>E-mail: {{fileData.private_email || '[None]'}}</div>
            </div>
            <div class="bill-right">
                <div>Електронна пошта: {{fileData.private_email || '[Нічого]'}}</div>

            </div>
        </div>
        <div class="bill-box">
            <div class="bill-left">
                <div>Phone: {{fileData.phone || '[None]'}}</div>
            </div>
            <div class="bill-right">
                 <div>Тел.: {{fileData.phone || '[Нічого]'}}</div>
            </div>
        </div>
        <h4 class="bill-title">___________________________</h4>
        <h4 class="bill-title">{{fileData.pe_name || '[None]'}} / {{fileData.pe_name || '[Нічого]'}}</h4>
        <!-- <el-button @click="submit">提 交</el-button> -->
    </el-form>

  </el-drawer>
</template>

<script>
import {billData, submitBillData} from '@/request/other_api'

export default {
  data(){
    return {
        dialogVisible:false,
        fileData: {},
        oldData: {
            editLine1: false
        },

    }
  },
  mounted () {
  },
  methods:{
    //获取审核完成报销单列表
    formateData(expense_id){
        billData({
          bill_id: expense_id //'PJ-WANe485ae7e-1618396582'
        }).then(res =>{
            if(res.code == 200){
                this.fileData = res.data || {}
            }
        })
    },
    //关闭窗口
    closeDrawer () {
        this.fileData = {}
        this.oldData = {
            editLine1: false
        }
      this.dialogVisible = false
    },
    handleClose (index,type) {
      this.oldData['editLine'+index] = false
      this.fileData[type+'_line'+index] = this.oldData[type+'_line'+index]
    },
    handleEdit (index,type) {
      this.oldData['editLine'+index] = true
      this.oldData[type+'_line'+index] = this.fileData[type+'_line'+index]
    },
    handleOk (index) {
      this.oldData['editLine'+index] = false
    },
    submit() {
        submitBillData(this.fileData).then(res =>{
            if(res.code == 200){
                this.$message.success(res.msg)
            } else {
                this.$message.error(res.msg)
            }
        })
    }
  }
}
</script>

<style lang="less" scoped>
.form-box {
    width: 100%;
    height: 90vh;
    overflow-x: hidden;
    overflow-y: scroll;
    .bill-box {
        display: flex;
        width: 98%;
        margin: 0 1%;
        [class^='el-icon-'],[class*=' el-icon-'] {
            float: right;
        }
    }
    .bill-left {
        width: 49%;
        height: 100%;
        margin-right: 1%;
    }
    .bill-right {
        width: 49%;
        height: 100%;
    }
    .bill-title {
        text-align: center;
    }
    .bill_left_right {
        width:50%;
        float:left;
        font-weight:bold
    }

}




</style>
